<template>
  <!-- 核销日志 -->
  <div class="root">
    <div class="cha">
      <div class="input1">
        <el-input v-model="obj.idorname" placeholder="请输入访客姓名" />
      </div>
      <!-- 按钮 -->
      <div>
        <el-button type="primary" @click="cha">查询</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <el-table ref="multipleTableRef" :data="tableData" style="width: 100%" border>
      <el-table-column align="center" property="name" label="访客人姓名"/>
      <el-table-column align="center" property="username" label="核销人姓名"/>
      <el-table-column align="center" property="addtime" label="核销时间" />
    </el-table>

    <!--  分页 -->
    <FenYe :total="totals" @getChildData='getChildData'></FenYe>
  </div>
</template>

<script setup lang="ts">
import {ref, reactive } from "vue";
import { cancel } from "../../api/login/index";
import FenYe from "../../components/fen ye/FenYe.vue"; //分页组件

// 列表数据
let tableData: any = reactive([]);
let totals = ref(0); // 一共多少条数据
const obj = reactive({
  //参数
  page: "1",
  pageSize: "10",
  idorname: "", //查询要的
});
let getList = async () => {
  let res: any = await cancel(obj);
  console.log(res);
  // 赋值
  // 防止往下追加
  tableData.length = 0;
  tableData.push(...res.data.data);
  // 一共多少条数据
  totals.value = res.data.total;
};
getList(); //接口调用

// 分页
const getChildData = (val:any) => {
  console.log(111, val)
  obj.page = val.page
  obj.pageSize = val.pageSize
  getList()
}

// 点击查询
let cha = () => {
  getList(); //刷新列表
};
</script>

<style scoped>
.input1 {
  width: 230px;
  margin-right: 20px;
}
.cha {
  display: flex;
  margin-bottom: 23px;
}
</style>